<template>
  <div
    v-loading.fullscreen.lock="loading"
    fullscreen="false"
    element-loading-text="加载中"
    element-loading-background="rgba(0, 0, 0, 0.2)"
    element-loading-spinner="el-icon-loading"
  >
    用户反馈信息列表
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{
            /* 样式名称 ： 属性 */
            'font-weight':'bold',
            'text-align':'center',
             'color':'#4d5259'
            }"
      :cell-style="{
            /* 样式名称 ： 属性 */
            'text-align': 'center',
            }"
      class="feed-table"
    >
      <el-table-column prop="id" label="编号" width="80"></el-table-column>
      <el-table-column label="头像" width="100">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" class="head_pic" />
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" width="180"></el-table-column>
      <el-table-column prop="uid" label="游戏ID" width="120"></el-table-column>
      <el-table-column prop="contactinfo" label="联系方式" width="180"></el-table-column>
      <el-table-column prop="title" label="问题标题" width="180"></el-table-column>
      <el-table-column prop="problem" label="问题描述"></el-table-column>
    </el-table>
  </div>
</template>
<style lang="less" scoped>
.feed-table {
  margin-top: 40px;
  text-align: center;
  .head_pic {
    width: 60p;
    height: 60px;
  }
}
</style>
<script>
import { getFeedBacks } from "@/api";
export default {
  data() {
    return {
      loading: true,
      tableData: []
    };
  },
  methods: {
    getFeedBackList() {
      getFeedBacks().then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.tableData = res.data.feedbackList;
        }
        this.loading = false;
      });
    }
  },
  mounted() {
    this.getFeedBackList();
  }
};
</script>